<template>
      <div class="app-body">
            <div class="chat-container">
                  <el-card>
                        <div slot="header" class="card-header">
                              <h5 class="card-title">与 
                                <el-select @change="updateOtherUser" size="mini" v-model="otherUser" filterable placeholder="请选择" :value-key="'id'">
                                    <el-option v-for="item in userList" :key="item.id" :label="item.nickName" :value="item"></el-option>
                                </el-select>
                                的聊天</h5>
                        </div>
                        <div class="chat-box"> 
                              <div
                                    v-for="(message, index) in messages"
                                    :key="index"
                                    class="message"
                                    :class="{ 'my-message': message.creator === currentUser.id, 'other-message': message.creator !== currentUser.id }"
                              >
                                    <div class="message-author"><el-tag type="success">{{ message.creator==currentUser.id?'我':message.author }}</el-tag></div>
                                    <div class="message-text">{{ message.message }}</div>
                              </div>
                        </div>
                        <div class="chat-input">
                              <el-input v-model="newMessage" placeholder="输入你的消息" @keyup.enter.native="sendMessage" clearable></el-input>
                              <el-button type="primary" @click="sendMessage">发送</el-button>
                        </div>
                  </el-card>
            </div>
      </div>
</template>

<script>
export default {
      name: "",
      props: [],
      data() {
            return {
                userList:[],
                  messages: [],
                  newMessage: "",
                  currentUser: {},
                  otherUser: {},
                  interval:''
            };
      },
      methods: {
            sendMessage() {
                  if (this.newMessage.trim() !== "" && this.otherUser) {
                        let formData = new FormData();
                        formData.append('receive',this.otherUser.id);
                        formData.append('message',this.newMessage);
                        this.$axios({ method: "POST", url: this.$url + "/client/exchangeMessage/add", data: formData }).then((res) => {
                                if (res.data.status.code < 400) {
                                    this.initMessage();
                                }
                                this.newMessage = "";
                        });
                  }
            },
            initUser(){
                this.$axios.get(this.$url + "admin/admin/list?page=0&pageSize=100")
                        .then((response) => {
                            this.userList=response.data.data.list.filter(user => user.id != this.currentUser.id);
                        });
            },
            updateOtherUser(e){
                this.otherUser=e;
                this.initMessage();
            },
            initMessage(){
                if(this.currentUser && this.otherUser){
                    this.$axios.get(this.$url+'/client/exchangeMessage/message?creator='+this.currentUser.id+'&receive='+this.otherUser.id).then(res=>{
                        this.messages=res.data.data.list;
                    })
                }
            }
      },
      mounted() {
        this.currentUser=JSON.parse(window.sessionStorage.getItem('admin'));
        this.initUser();
        this.interval=setInterval(() => {
            this.initMessage();
        }, 3000);
      },
      destroyed(){
        clearInterval(this.interval);
      }
};
</script>

<style scoped>
.chat-container {
      margin-top: 50px;
}

.chat-box {
      height: 400px;
      overflow-y: scroll;
      display: flex;
      flex-direction:column;
}

.message {
      margin-bottom: 10px;
      max-width: 70%;
      padding: 8px 10px;
      border-radius: 10px;
      word-break: break-all;
}

.my-message {
      background-color: #d4edda;
      align-self: flex-end;
}

.other-message {
      background-color: #f8f9fa;
      align-self: flex-start;
}

.message-author {
      font-weight: bold;
      margin-bottom: 5px;
}

.message-text {
      font-size: 16px;
}

.chat-input {
      margin-top: 10px;
      display: flex;
      align-items: center;
}

.el-input {
      flex-grow: 1;
      margin-right: 10px;
}

.el-button {
      width: 100px;
}
</style>
